<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="card" shadow="never">
        <div class="add-button">
          <span style="float: left" class="span-message"
            >说明：目前支持学科和关键字条件搜索</span
          >
          <el-button
            @click="$router.push('/questions/new?id=' + 1)"
            icon="el-icon-edit"
            type="success"
            >新增试题</el-button
          >
        </div>
        <!-- 搜索表单区域 -->
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="学科">
                  <el-select
                    @change="changeSubject"
                    v-model="form.subjectID"
                    class="form-item"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in subjectList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="二级目录">
                  <el-select
                    v-model="form.catalogID"
                    class="form-item"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in catalogList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      style="width: 100%"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="标签">
                  <el-select
                    v-model="form.tags"
                    class="form-item"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in tagsList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item v-model="form.keyword" label="关键字">
                  <el-input
                    style="width: 100%"
                    class="form-item"
                    placeholder="根据题干搜索"
                  ></el-input>
                </el-form-item></div
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="试题类型">
                  <el-select
                    v-model="form.questionType"
                    class="form-item"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in questionTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="难度">
                  <el-select
                    style="width: 100%"
                    v-model="form.difficulty"
                    class="form-item"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in difficultyList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="方向">
                  <el-select
                    style="width: 100%"
                    v-model="form.direction"
                    class="form-item"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in directionList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="录入人">
                  <el-select
                    style="width: 100%"
                    v-model="form.creatorID"
                    class="form-item"
                    placeholder="请选择"
                  >
                    <el-option label="录入管理员" value="1"></el-option>
                    <el-option label="超级管理员" value="2"></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="题目备注">
                  <el-input class="form-item" style="width: 100%"></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="企业简称">
                  <el-input class="form-item" style="width: 100%"></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="城市">
                  <el-row>
                    <el-col :span="12"
                      ><div class="grid-content bg-purple">
                        <el-select
                          style="margin-right: 20px"
                          @change="changeCity"
                          v-model="form.province"
                          class="form-item-city"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="(item, index) in provincesList"
                            :key="index"
                            :label="item"
                            :value="item"
                          ></el-option>
                        </el-select></div
                    ></el-col>
                    <el-col :span="12"
                      ><div class="grid-content bg-purple">
                        <el-select
                          v-model="form.city"
                          class="form-item-city form-item-city-two"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="(item, index) in cityList"
                            :key="index"
                            :label="item"
                            :value="item"
                          ></el-option>
                        </el-select></div
                    ></el-col>
                  </el-row>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item style="text-align: right">
                  <el-button @click="delForm">清除</el-button>
                  <el-button type="primary" @click="searchForm">搜索</el-button>
                </el-form-item>
              </div></el-col
            >
          </el-row>
        </el-form>
        <!-- 表格区域 -->
        <div style="width: 100%" class="el-icon-info table-box">
          数据一共有{{ detailList.counts }}条
        </div>
        <el-table :data="detailList.items" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="200px">
          </el-table-column>
          <el-table-column prop="subject" label="学科"> </el-table-column>
          <el-table-column prop="catalog" label="目录"> </el-table-column>
          <el-table-column prop="questionType" label="题型">
            <template slot-scope="scope">
              <span>{{ scope.row.questionType | questionValue }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="280px">
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180px">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | dataForm }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度">
            <template slot-scope="scope">
              <span>{{ scope.row.difficulty | difficultyTrans }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人"> </el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <el-button
                @click="setDialog(scope.row)"
                type="primary"
                icon="el-icon-view"
                circle
                plain
              ></el-button>
              <el-button
                @click="$router.push('/questions/new?id=' + scope.row.id)"
                type="success"
                icon="el-icon-edit"
                circle
                plain
              ></el-button>
              <el-button
                @click="deltable(scope.row)"
                type="danger"
                icon="el-icon-delete"
                circle
                plain
              ></el-button>
              <el-button
                @click="addChoice(scope.row)"
                type="warning"
                icon="el-icon-check"
                circle
                plain
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
          class="pagination"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="form.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="detailList.counts"
        >
        </el-pagination>
        <!-- 预览弹框 -->
        <questions-preview
          ref="questionPreview"
          :data="questionInfo"
        ></questions-preview>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, remove, choiceAdd } from '@/api/hmmm/questions.js'
import { simple } from '@/api/hmmm/subjects.js'
import { tagsSimple } from '@/api/hmmm/tags.js'
import { directorySimple } from '@/api/hmmm/directorys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import QuestionsPreview from '../components/questions-preview'
// import messag from '@/api/hmmm/constants'
import { direction, questionType, difficulty } from '@/api/hmmm/constants'

import dayjs from 'dayjs'
export default {
  name: 'Question',
  data () {
    return {
      subjectList: [], // 学科列表
      catalogList: [], // 二级目录列表
      tagsList: [], // 标签列表
      directionList: [], // 方向列表
      questionTypeList: [], // 试题类型
      difficultyList: [], // 难度
      form: {
        subjectID: null, // 学科
        catalogID: null, // 目录
        tags: null, // 标签
        keyword: null, // 关键字
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        city: null, // 城市区
        province: null, // 城市
        page: 1, // 当前页码
        pagesize: 5 // 每页条数
      },
      detailList: {}, // 题库列表
      provincesList: [], // 城市列表
      cityList: [], // 地区列表
      questionInfo: {} // 预览对象
    }
  },
  components: {
    QuestionsPreview
  },
  created () {
    // 调用获取学科API函数
    this.simple()

    // 调用获取城市API函数
    this.provinces()

    // 调用获取基础题库API函数
    this.list()
  },
  filters: {
    // 格式化时间
    dataForm (time) {
      return dayjs(time).format('YYYY-MM-DD')
    },

    // 题型转换
    questionValue (value) {
      const questionTypeList = questionType.filter(
        (item) => item.value === value
      )
      return questionTypeList.map((item) => item.label)[0]
    },

    // // 难度类型转换
    difficultyTrans (value) {
      const difficultyList = difficulty.filter((item) => item.value === value)
      return difficultyList.map((item) => item.label)[0]
    }
  },
  methods: {
    // 预览按钮
    setDialog (questionInfo) {
      this.questionInfo = questionInfo
      this.$nextTick(() => {
        this.$refs.questionPreview.open()
      })
    },

    // 搜索事件
    async searchForm () {
      this.form.page = 1
      this.list()
    },
    // 点击加入精选的判断
    async doChoice (row) {
      const obj = {
        id: row.id,
        choiceState: 1
      }
      await choiceAdd(obj)
      // 做一个页码判断
      if (this.detailList.items.length === 1) {
        this.form.page--
        if (this.form.page <= 0) {
          this.form.page = 1
        }
      }
      this.list()
      this.$message({
        type: 'success',
        message: '加入精选成功!'
      })
    },
    // 加入精选题库
    addChoice (row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        iconClass: 'el-icon-info'
      })
        .then(() => {
          this.doChoice(row)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消加入'
          })
        })
    },
    // 点击删除时做的判断
    async doDel (row) {
      await remove(row)
      // 做一个页码判断
      if (this.detailList.items.length === 1) {
        this.form.page--
        if (this.form.page <= 0) {
          this.form.page = 1
        }
      }
      this.list()
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
    },
    // 删除题目
    deltable (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDel(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 清除表单数据
    delForm () {
      this.form = {}
      this.list()
    },

    // 获取题库列表
    async list () {
      const res = await list(this.form)
      this.detailList = res.data
      // console.log(this.detailList)
    },

    // 学科改变事件
    async changeSubject () {
      // 获取二级目录列表
      const directoryRes = await directorySimple()
      this.catalogList = directoryRes.data
      // 获取标签列表
      const tagsRes = await tagsSimple()
      this.tagsList = tagsRes.data
    },

    // 城市下拉框改变事件
    changeCity (name) {
      this.cityList = citys(name)
    },

    // 获取城市列表
    provinces () {
      this.provincesList = provinces()
    },

    // 获取基础内容
    async simple () {
      // 获取学科列表
      const res = await simple()
      this.subjectList = res.data
      this.directionList = direction
      this.questionTypeList = questionType
      this.difficultyList = difficulty
    },

    // 每页条数改变时触发
    async handleSizeChange (newsize) {
      this.form.pagesize = newsize
      this.list()
    },

    // 页码改变时触发
    async handleCurrentChange (newpage) {
      this.form.page = newpage
      this.list()
    }
  }
}
</script>

<style scoped>
.span-message {
  color: rgb(255, 192, 203);
}
.add-button {
  margin-bottom: 20px;
  text-align: right;
}
.table-box {
  line-height: 40px;
  height: 40px;
  margin-bottom: 10px;
  padding-left: 10px;
  background: rgb(244, 244, 245);
  color: rgb(144, 147, 153);
}
.card {
  padding: 0 10px;
}
.pagination {
  margin-top: 20px;
  padding-bottom: 20px;
  float: right;
}
</style>
